@import "images";

#content{
	.carousel-container{
		position:relative;
		width:100%;
		h1{
			font-weight:bold;
			font-size:30px;
		}
		.spacer{
			height:256px;
			width:1px;
		}
		.left-arrow,.right-arrow{
			position:absolute;
			height:234px;
			bottom:20px;
			width:30px;
			background:#CCC;
			opacity:0.5;
			cursor:pointer;
			background-repeat:no-repeat;
			background-size:contain;
			background-position:center center;
		}
		.left-arrow:hover,.right-arrow:hover{
			opacity:1;
		}
		.left-arrow{
			left:0px;
			background-image:url('/images/left.svg');
		}
		.right-arrow{
			right:0px;
			background-image:url('/images/right.svg');
		}
		.carousel{
			position:absolute;
			left:30px;
			right:30px;
			overflow:hidden;
			height:256px;
			padding:0;
			.carousel-contents{
				height:100%;
				margin:0;
				padding:0;
				width:1000%;
				.product{
					display:inline-block;
					position:relative;
					height:100%;
					width:256px;
					color:black;
					text-decoration:none;
					.thumbnail{
						position:absolute;
						top:2px;
						left:2px;
						right:2px;
						bottom:30px;
						@extend .image-viewable;
					}
					.label{
						position:absolute;
						bottom:0px;
						height:30px;
						left:0px;
						width:100%;
						.price{
							float:right;
						}
					}
				}
				.product-spacer{
					width:15px;
					display:inline-block;
					height:100%;
				}
				.product-spacer:last-child{
					display:none;
				}
			}
		}
	}
	.html5{
		display:block;
		text-align:center;
	}
}